window.addEventListener('load', function () {
    var data = [{
            img: "https://img12.360buyimg.com/n7/jfs/t1/94329/20/12711/106212/5e4a97bcE66a103ae/721ae0eaf9ecbaa7.jpg",
            price: "1999.00",
            name: "荣耀20S 李现同款 3200万人像超级夜景 4800万超广角AI三摄 麒麟810 全网通版6GB+128GB 蝶羽蓝",
            goodsId: "1"
        }, {
            img: "https://img.alicdn.com/bao/uploaded/bao/upload/TB1RhzMOVY7gK0jSZKzXXaikpXa.png_400x400q60.jpg",
            price: "330.00",
            name: "【官方正品】Dior迪奥烈艳蓝金唇膏传奇红唇#999#888#772哑光",
            goodsId: "2"
        }, {
            img: "https://img.alicdn.com/bao/uploaded/bao/upload/TB1iWSdQEH1gK0jSZSyXXXtlpXa.png_400x400q60.jpg",
            price: "59.00",
            name: "三只松鼠 开心果100g每日坚果休闲孕妇零食干果健康网红炒货小吃",
            goodsId: "3"
        },
        {
            img: "https://img.alicdn.com/bao/uploaded/bao/upload/TB1dvlKQpT7gK0jSZFpXXaTkpXa.png_400x400q60.jpg",
            price: "13.00",
            name: "百草味香蕉脆片75g/袋水果干芭蕉干办公室休闲网红零食小吃特产",
            goodsId: "4"
        },
        {
            img: "https://gw.alicdn.com/bao/uploaded/i3/2206736426581/O1CN01S1ovwm1yU99dwhOup_!!0-item_pic.jpg",
            price: "72.00",
            name: "波兰原装进口Mlekovita脱脂牛奶1L*12",
            goodsId: "5"
        },
        {
            img: "https://gw.alicdn.com/bao/uploaded/i4/2200796057976/O1CN01yA9Wap28n3epjxyU3_!!0-item_pic.jpg",
            price: "175.00",
            name: "雅鹿清仓特价男士棉服男中长款外套加厚爸爸外套大码胖子棉衣",
            goodsId: "6"
        }
    ];
    // 商品展示类 
    class Show {
        constructor() {
            this.data = data;
            this.con = document.querySelector('.goods');
            this.goods_itemsNum = Math.ceil(this.data.length / 3);
            this.test = document.querySelector('.test')
        }
        // 把data到渲染页面上
        init() {
            var items = "";
            let that = this;
            // console.log(this.goods_itemsNum);
            for (var i = 0; i < this.goods_itemsNum; i++) { //3个goods_items
                items += `
                <div class="goods-item card-group">
                </div>
                `
            }
            this.con.innerHTML = items;
            var goods_items = document.querySelectorAll('.goods-item');
            var cards1 = "";
            var cards2 = "";
            // 每个goods_item 三个card

            for (var i = 0; i < 3; i++) { // 循环三次 生成三个card
                cards1 += `
                    <div class="card" index="${that.data[i].goodsId}">
                        <img src="${that.data[i].img}" class="img-fluid card-img-top" alt="">
                        <div class="card-body">
                            <h5 class="card-title text-wrap">${that.data[i].name}</h5>
                            <p class="card-text">￥${that.data[i].price}</p>
                            <a href="javascript:;" class="decrement">-</a>
                            <input type="text" value="1" class="num"></input>
                            <a href="javascript:;" class="increment">+</a><br><br>
                            <a href="javascript:;" class="btn btn-primary add">加入购物车</a>
                        </div>
                    </div>
                       `

            }
            goods_items[0].innerHTML = cards1
            for (var i = 3; i < 6; i++) { // 循环三次 生成三个card
                cards2 += `
                <div class="card" index="${that.data[i].goodsId}">
                <img src="${that.data[i].img}" class="img-fluid card-img-top" alt="">
                <div class="card-body">
                    <h5 class="card-title text-wrap">${that.data[i].name}</h5>
                    <p class="card-text">￥${that.data[i].price}</p>
                    <a href="javascript:;" class="decrement">-</a>
                    <input type="input" value="1" class="num"></input>
                    <a href="javascript:;" class="increment">+</a><br><br>
                    <a href="javascript:;" class="btn btn-primary add">加入购物车</a>
                </div>
            </div>
                       `

            }
            goods_items[1].innerHTML = cards2
        }
        // 绑定事件
        addEvent() {
            var that = this;
            this.con.addEventListener('click', function (e) {
                var tar = e.target;
                // console.log(tar.className);
                that.goodsIndex = tar.parentNode.parentNode.getAttribute("index"); // 给Show追加属性goodIndex
                // 点击加号 数量 +1
                if (tar.className == 'increment') {
                    // console.log('加1');
                    that.addNum(that.goodsIndex);
                }
                // 点击减号 数量-1
                if (tar.className == 'decrement') {
                    // console.log('减1');
                    if (that.newVal != 1) {
                        that.minusNum(that.goodsIndex);
                    }
                }
                if (tar.className == 'btn btn-primary add') {
                    // console.log('加入购物车');
                   
    
                    if(document.cookie){
                        console.log('已登录');
                         // 本地存储
                        that.setData(that.goodsIndex);
                        // 把加入购物车的商品写入文件
                    }else{
                        console.log('未登录');
                        alert('请先登录/注册')
                    }
                }
            })
            this.con.addEventListener('input', function (e) {
                var tar = e.target;
                if (tar.className == 'num') {
                    that.newVal = tar.value;
                }
            })
        }
        // 数量+1
        addNum(index) {
            var num = this.con.querySelectorAll('.num')[index - 1];
            var numval = num.value
            // console.log(num);
            numval++;
            num.value = numval;
            this.newVal = num.value;
        }
        // 数量-1
        minusNum(index) {
            var num = this.con.querySelectorAll('.num')[index - 1];
            var numval = num.value
            // console.log(num);
            numval--;
            num.value = numval;
            this.newVal = num.value;
        }
     
        // 本地存储数据
        setData(index) {
            var num = this.con.querySelectorAll('.num')[index - 1];
            this.newVal = num.value;
            console.log(this.newVal);
            // 先获取本地数据
            var gm = localStorage.getItem('goodsMsg');
            // 检测原来有没有数组对象 没有就创建
            if (gm == null) {
                gm = [{
                    goodsId: this.goodsIndex,
                    num: parseInt(this.newVal),
                    msg: this.getData(this.goodsIndex)
                }]
            } else { // 如果有，就追加的是对象
                gm = JSON.parse(gm);
                var flag = false;
                for (let i = 0; i < gm.length; i++) {
                    if (gm[i].goodsId == this.goodsIndex) {
                        gm[i].num += parseInt(this.newVal);
                        flag = true;
                        break
                    }
                }
                if (flag == false) {
                    gm.push({
                        goodsId: this.goodsIndex,
                        num: parseInt(this.newVal),
                        msg: this.getData(this.goodsIndex)
                    })
                }

            }
            localStorage.setItem("goodsMsg", JSON.stringify(gm));
        }
        // 获取data数据   根据传入的id获取data对应的goodsId数据
        getData(id) {
            for (let i = 0; i < this.data.length; i++) {
                if (this.data[i].goodsId == id) {
                    return this.data[i];
                }
            }
            return {}
        }

    }
    var show = new Show();
    show.init();
    show.addEvent();
})